/**
 * Created by Charlotte on 2017/9/4.
 */



$(document).ready(function () {
    init()
    $('#image').cropper({
        aspectRatio:4/3,
        dragMode:"move",
        preview:$('#view'),
        crop : function () {
        },
    });
})

var roomInformation;
function init() {
    $.ajax({
        url:url+'person/getMyRoom.do',
        data:{username:$username},
        type:"get",
        datatype:"json",
        success:function (data) {
            if(data!="null") {
                $('div[name="room"]').removeClass('hide')
                $('#tip').addClass('hide')
                roomInformation=JSON.parse(data)
                console.log(roomInformation)
                roomInit(roomInformation);
            }
        }
    })
}
function roomInit(information) {
    $('label[data="'+information.status+'"]').removeClass('hide');
    $('button[data="'+information.status+'"]').removeClass('hide');
    $('#key').val(information.roomkey);
    $('#roomname').val(information.roomname);
    $('#description').val(information.description)
    $('#roomid').text(information.roomid);
}

$('#reset').on('click',function () {
    Update();

})

$('.close').on('click' ,function () {
    $(this).parents('div').eq(0).addClass('hide');
})
var imgurl;
$("#inputfile").on('change',function () {
    files = $(this).prop('files');

    if (files.length > 0) {
        file = files[0];
    }
    if (imgurl) {
        URL.revokeObjectURL(this.url); // Revoke the old one
    }
    imgurl = URL.createObjectURL(file);
    $('#image').cropper('replace',imgurl);
})


function Update() {
    var imageurl=$('#image').cropper('getCroppedCanvas',{
        width:200,
        height:150
    }).toDataURL("image/jpg").split(',')[1];
    console.log(imageurl.length)
    var json={username:roomInformation.roomid+$username,picturestr:imageurl}
    $.ajax({
        url:url+"person/uploadpicture.do",
        data:JSON.stringify(json),
        type:"post",
        contentType :'application/json;charset=UTF-8',
        success:function (data) {
            roomInformation.picturesrc=data;
            roomInformation.roomname=$('#roomname').val();
            roomInformation.description=$('#description').val();
            //图片待添加
            $.ajax({
                url:url+"person/updateRoom.do",
                data:roomInformation,
                type:'get',
                datatype:"json",
                success:function (data) {
                    if(data=="success")
                    {
                        $("#myAlertSuccess").removeClass('hide');
                    }else
                    {
                        $("#myAlertError").removeClass('hide');
                    }
                }
            })
        }
    })
}


$("button[name='open']").on('click',function () {
    $.ajax({
        url:url+"person/Live.do",
        data:{id:roomInformation.roomid,status:1},
        datatype:"json",
        type:"get",
        success:function (data) {
            if(data=="success")
            {
                $("button[name='open']").addClass("hide");
                $("button[name='close']").removeClass('hide')
                $("label[data='0']").addClass('hide');
                $("label[data='1']").removeClass('hide');
            }

        }
    })
})

$("button[name='close']").on('click',function () {
    $.ajax({
        url:url+"person/Live.do",
        data:{id:roomInformation.roomid,status:0},
        datatype:"json",
        type:"get",
        success:function (data) {
            if(data=="success")
            {
                $("button[name='close']").addClass("hide");
                $("button[name='open']").removeClass('hide');
                $("label[data='1']").addClass('hide');
                $("label[data='0']").removeClass('hide');

            }

        }
    })
})